<script setup>
import { User } from '@element-plus/icons-vue';

var squareUrl="./vite.svg"
</script>

<template>
  <el-container>
    <el-header>
      <el-menu 

      :router="true"
      class="el-menu-demo" 
      mode="horizontal"
       background-color="#545c64"
        text-color="#fff" 
        active-text-color="#ffd04b"
       >
        <el-menu-item index="1">
          <el-avatar shape="square"  
          :src="squareUrl" />人力资源后台管理系统
        </el-menu-item>
        <el-sub-menu index="2">
          <template #title>用户管理</template>
          <el-menu-item index="2-1">用户查询</el-menu-item>
          <el-menu-item index="2-2">统计分析</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="4">退出系统</el-menu-item>
      </el-menu>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
      >
        <el-sub-menu>
          <template #title>
            <el-icon><User /></el-icon>
            <span>用户管理</span>
          </template>
          <el-menu-item>
            <router-link to="/userManager">
            <el-icon><User /></el-icon>
            用户管理
          </router-link>
          </el-menu-item>
          <el-menu-item index="1-2">
           <el-icon><Menu /></el-icon>
            统计分析</el-menu-item>
          <el-menu-item index="1-2">
            <el-icon><DocumentCopy /></el-icon>
            打印报表</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="2">
          <el-icon><Lock /></el-icon>
          <span>权限设置</span>
        </el-menu-item>
        <el-menu-item index="4">
          <el-icon><setting /></el-icon>
          <span>系统管理</span>
        </el-menu-item>
      </el-menu>
      </el-aside>
      <el-container>
        <el-main>
          <router-view/>
        </el-main>
        <el-footer>&copy;2024-2025 天津师范大学 Copy Right</el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>

<style scoped>
.el-container {
  height: 100%;
  padding: 0px;
}

.el-header {
  padding: 0px;
}
.el-menu {
  background-color: black;
}

.el-aside {
  background-color: black;
}

.el-main {
  background-color: white;
}

.el-footer {
  text-align: center;
  background-color: black;
  line-height: 60px;
  color: white;
}
</style>
